import { GrayRight, GreenRight, Sub } from '../MyIcon'
import './index.css'
import React from 'react'
import { Progress } from 'antd'

const PlanItem = props => {
  return (
    <div className="PlanItem">
      <div
        style={{ cursor: 'pointer' }}
        onClick={e => {
          props.choose(props.item.key)
        }}
      >
        {props?.item?.chosen ? <GreenRight style={{ boxSize: 'border-box', padding: '5px' }} /> : <GrayRight style={{ cursor: 'pointer' }} />}
      </div>
      <div className="PlanItem_content">
        <div><font color="#545454">{props.item.content}</font></div>
        <Progress size="small" percent={props.item?.percent} />
      </div>
      <div
        onClick={() => {
          props.delete(props.item.key)
        }}
      >
        <Sub style={{ cursor: 'pointer', padding: '5px' }} />
      </div>
    </div>
  )
}

export default React.memo(PlanItem, (prev, next) => {
  // if (prev.item.choose === next.choose && prev.item.key === next.item.key) return true
  return false
})
